<template>
  <div class="outline">
    <div class="headertop">
      <div class="imgcenter"><img src="../../../assets/img1.png" alt="" /></div>
      <div class="name">123</div>
    </div>
    <div class="main">
      <img src="../../../assets/snowman.png" alt="" />
    </div>
    <div class="titleP">
      亲爱哒，感谢你的支持与陪伴，欢迎推荐新朋友加入
      我们。每成功推荐一位新的伙伴可以获得
      <span style="color: #ff9500">20</span>金币
    </div>
    <div class="but">
      <el-button round @click="openy">好，马上推荐给小伙伴！</el-button>
    </div>
    <div class="listcard">
      <div>已成功推荐<span style="color: #ff9500">3</span>位</div>
      <div class="incard">
        <div>微信昵称</div>
        <div>获得金币</div>
      </div>
      <div class="incard" v-for="(item, index) in netlist" :key="index">
        <div>{{ item.name }}</div>
        <div style="color: #ff9500">{{ item.mouny }}</div>
      </div>
    </div>
    <div class="masklayer" v-show="maskopen">
      <div class="writeshare">
        <div class="imgshare">
          <img src="../../../assets/write.png" alt="" />
        </div>
        <div class="imgshare1">
          <img src="../../../assets/share.png" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import wx from "weixin-js-sdk";
import request from "@/utils/request";
import {server} from "@/utils/env";
export default {
  data() {
    return {
      netlist: [
        { name: "123", mouny: 21 },
        { name: "qwe", mouny: 21 },
      ],
      maskopen: false,
      userId: 0,
    };
  },
  async mounted() {
    await this.hint();
    await this.getShareInfo();
  },
  methods: {
    hint() {
      console.log("getinfo", "提示");
      return request({
        url: "/generator/user/front/getinfo",
        method: "get",
      }).then((response) => {
        // console.log(response.user);
        this.userId = response.user.id;
      });
    },
    openy() {
      this.maskopen = true;
    },
    getShareInfo() {
      let data = { url: window.location.href };
      return (
        request({
          url: "generator/user/front/sign",
          method: "post",
          data: data,
        })
          //getShare(data) //这里我写了一个公用的接口请求js，这里正常axios请求就可以，只要拿到数据都可以
          .then((res) => {
            // console.log(res);
            localStorage.setItem("jsapi_ticket", res.jsapi_ticket);
            //拿到后端给的这些数据
            let timestamp = res.timestamp;
            let nonceStr = res.nocestr;
            let signature = res.signature;
            // let iosurl = server.domain+"#/attention";
            let config = {
              title: "分享给朋友,获得积分奖励",
              desc: "获得积分",
              link: server.domain+"#/attention",
              imgUrl: "",
              type: "",
              dataUrl: "",
              success: function () {
                console.log("分享成功!");
              },
              cancel: function () {
                console.log("取消分享!");
              },
            };
            wx.config({
              debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
              appId: server.appId, // 必填，公众号的唯一标识，填自己的！
              timestamp: timestamp, // 必填，生成签名的时间戳，刚才接口拿到的数据
              nonceStr: nonceStr, // 必填，生成签名的随机串
              signature: signature, // 必填，签名，见附录1
              jsApiList: ["updateTimelineShareData", "onMenuShareAppMessage"],
            });

            wx.ready(function () {
              //分享到朋友圈
              // wx.updateTimelineShareData({
              //   title: "指定页面", // 分享时的标题
              //   link: server.domain+"#/attention", // 分享时的链接
              //   imgUrl: "",
              //   success: function () {
              //     console.log("分享成功");
              //   },
              //   cancel: function () {
              //     console.log("取消分享");
              //   },
              // });
              //分享给朋友
              wx.onMenuShareAppMessage(config);
            });

            wx.error(function (res) {
              console.log(res);
            });
          })
      );
    },
  },
};
</script>

<style lang="less" scoped>
.outline {
  position: relative;
  min-height: 100vh;
}
.headertop {
  display: flex;
  padding: 15px;
}
.headertop .name {
  margin-left: 15px;
  font-size: 16px;
}
.imgcenter {
  width: 50px;
  img {
    width: 100%;
    height: 100%;
  }
}
.main {
  // border: 1px solid red;
  padding: 30px 80px;
  img {
    width: 100%;
    height: 100%;
  }
}
.titleP {
  padding: 0 25px 30px 25px;
  font-size: 16px;
}
.but {
  // border: 1px solid red;
  text-align: center;
  margin-bottom: 25px;
  /deep/.el-button.is-round {
    padding: 12px 60px;
    background: #ff9500;
    color: #ffff;
  }
}
.listcard {
  // border: 1px solid red;
  text-align: center;
  font-weight: bold;
}
.incard {
  display: flex;
  justify-content: space-around;
  align-items: center;
  div {
    padding: 10px;
  }
}
.masklayer {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  height: 100%;
  background: #303030;
  opacity: 0.32;
}
.writeshare {
  // border: 1px solid red;
  padding: 15px;
  width: 100%;
  height: 100px;
  display: flex;
  justify-content: flex-end;
  z-index: 998;
}
.imgshare {
  // border: 1px solid red;
  margin-left: 20px;
  width: 100px;
  height: 80px;

  img {
    width: 100%;
    height: 100%;
  }
}
.imgshare1 {
  // border: 1px solid red;
  margin-left: 20px;
  width: 80px;
  height: 80px;
  img {
    width: 100%;
    height: 100%;
  }
}
</style>